<template>
  <div class="container">
    <div class="nav-bar">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>授权管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container-main">
      <div class="main-aside scroll-class">
        <div class="aside-add">
          <el-button type="success" size="mini" @click="showDialog">添加授权</el-button>
        </div>
        <div
          class="aside-item hidden-text-1"
          :class="{'aside-item-active': active == index}"
          v-for="(item, index) in roleTreeList"
          :key="index"
          @click="changeData(item, index)"
          :title="item.name"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="main-table">
        <div class="table-title">
          当前角色:
          <span>{{ roleTreeList[active] && roleTreeList[active].name }}</span>
        </div>
        <el-table :data="tableData" border style="width: 100%" size="small" max-height="500">
          <el-table-column label="菜单名称" min-width="200">
            <template slot-scope="{row}">
              <span>{{ 111 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="200" >
            <template slot-scope="{row}">
              <el-button type="text" size="small">删除</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="container-dialog">
      <el-dialog
        title="添加授权"
        :visible.sync="menuTableDialog"
        width="80%"
        top="2vh"
      >
        <Search
          :searchList='searchList'
          size="small"
          otherText="批量添加"
          other
          @other="addAuth"
          @search="searchHandle('search', $event)"
          @refresh="searchHandle('refresh', $event)"
        />
        <!-- <el-button size="mini" type="primary" class='mb-20'>批量添加</el-button> -->

        <div class="dialog-content">
          <el-table
            :data="menuList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            size="mini"
            default-expand-all
          >
            <el-table-column type="selection" width="60" />
            <el-table-column prop="name" label="菜单名称" width="200" />
            <el-table-column label="路径" min-width="200">
              <template slot-scope="{row}">
                <span>{{ row.link }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否禁用" min-width="200">
              <template slot-scope="{row}">
                <span>{{ row.status == 1 ? '启用' : '禁用' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="菜单备注" width="200" />
            <el-table-column
              label="操作"
              width="200" >
              <template slot-scope="{row}">
                <el-button type="text" size="small">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main-page">
        <el-pagination
          background
          :page-size="10"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="totalPage" />
        </div>
        <!-- <span slot="footer">
          <el-button size="small" @click="menuTableDialog = false">取 消</el-button>
          <el-button size="small" type="primary" @click="menuTableDialog = false">确 定</el-button>
        </span> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Search from '../../components/Common/Search'

export default {
  created() {
    this.tableData = this.$mock.tableData
    this._getRoleTree()
  },
  data() {
    return {
      searchList: [
        { value: '', key: 'name', type: 'input', placeholder: '请输入菜单名称' }
      ],
      searchForm: {},
      tableData: [],
      menuList: [],
      roleTreeList: [],
      active: 0,
      totalPage: 0,
      currentPage: 1,
      menuTableDialog: false
    }
  },

  components: {
    Search
  },

  computed: {},

  methods: {
    changeData(item, index) {
      this.active = index
    },
    showDialog() {
      this.menuTableDialog = true
      this._getPage()
    },
    addAuth() {},
    searchHandle(type, form) {
      this.searchForm = form
      if (type === 'search') {
        this._getPage(form)
      } else if (type === 'refresh') {
        this._getPage()
        this.searchList.forEach(item => {
          item.value = ''
        })
      }
    },
    // 获取角色树
    async _getRoleTree() {
      const res = await this.$api.getRoleTree()
      if (res.code === 200) {
        this.roleTreeList = res.data.datas
      }
    },
    // 获取菜单树
    async _getPage(form) {
      const res = await this.$api.menuPage({
        page: this.currentPage,
        size: 10,
        ...form
      })
      console.log(res.data);
      if (res.code === 200) {
        this.menuList = res.data.rows
        this.totalPage = +res.data.total
      }
    },
  }
}

</script>
<style lang='scss' scoped>
.container-main{
  display: flex;
  padding-right: 20px;
}

.main-aside{
  text-align: center;
  max-height: 700px;
  overflow: auto;
  width: 120px;
  .aside-add{
    margin-bottom: 10px;
  }
  .aside-item{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
  }
  .aside-item-active{
    background-color: #eee;
    position: relative;
    color: #0095ff;
    transition: all .5s;
  }
}

.main-table{
  padding: 10px 0;
  width: calc(100% - 120px);
  box-sizing: border-box;
  margin-left: 20px;
}

.table-title{
  padding-left: 20px;
  margin-bottom: 10px;
  border-left: 3px solid #eee;
  span{
    font-weight: bold;
    margin-left: 10px;
  }
}
</style>
